import QtQuick
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import FluentUI

import MyApp

ListView {
    spacing: 5
    clip: true
    model: client.devices
    delegate: FluButton {
        height: 75
        width: ListView.view.width
        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 12
            spacing: 10
            RowLayout {
                FluRectangle {
                    Layout.alignment: Qt.AlignVCenter
                    width: 12
                    height: 12
                    radius: [6, 6, 6, 6]
                    color: {
                        switch (modelData.device_status) {
                        case Types.IDLE:
                            return "green"
                        case Types.MEASURING:
                            return "yellow"
                        case Types.UNKNOWN:
                            return "yellow"
                        case Types.TIMEOUT:
                            return "red"
                        case Types.DISCONNECTED:
                            return "red"
                        default:
                            return "red"
                        }
                    }
                }
                FluText {
                    font.pixelSize: 16
                    text: "测量设备"
                }
                Item {
                    Layout.fillWidth: true
                }
                FluText {
                    font.pixelSize: 16
                    text: "ID:" + modelData.device_id
                }
            }
            RowLayout {
                FluText {
                    id: status_label
                    Layout.alignment: Qt.AlignBottom
                    property string currentText
                    currentText: {
                        switch (modelData.device_status) {
                        case Types.IDLE:
                            return "IDLE"
                        case Types.MEASURING:
                            return "MEASURE"
                        case Types.UNKNOWN:
                            return "WAITING"
                        case Types.TIMEOUT:
                            return "TIMEOUT"
                        case Types.DISCONNECTED:
                            return "OFFLINE"
                        default:
                            return "UNDEFINED"
                        }
                    }

                    font.pixelSize: 14
                    opacity: 1.0

                    SequentialAnimation {
                        id: fadeAnimation
                        running: false
                        NumberAnimation {
                            target: status_label
                            property: "opacity"
                            to: 0
                            duration: 100 // 淡出动画
                        }
                        ScriptAction {
                            script: {
                                // 在淡出结束时更新文本
                                status_label.text = "状态：" + status_label.currentText // 保存当前的文本内容
                            }
                        }
                        NumberAnimation {
                            target: status_label
                            property: "opacity"
                            to: 1
                            duration: 100 // 淡入动画
                        }
                    }
                    // 每次文字变化时触发淡出和淡入
                    onCurrentTextChanged: {
                        fadeAnimation.start()
                    }
                }
                Item {
                    Layout.fillWidth: true
                }

                FluText {
                    font.pixelSize: 14
                    text: "电压：" + roundToDecimals(modelData.cur_voltage,
                                                    2) + "V"
                }
            }
        }
        onClicked: {
            client.cur_device_index = index
        }
    }
    function roundToDecimals(num, decimals) {
        var factor = Math.pow(10, decimals)
        return Math.round(num * factor) / factor
    }
}
